<script>
import citys from '@/assets/citydata'

export default {
  data(){
    return{
      communityLine:{  /*模糊查询所有数据参数*/
        name:'',
        pageNum:1,
        startTime:'',
        endTime:'',
        pageSize: 5,
        communityName:''
  },
      community:{  //小区信息
        addOrUpdateFlag: 1, // 判断是新增还是修改的标志  1:新增  2：修改
        communityAddress: "", // 小区详细地址
        communityAreaCode: "", // 小区位置编码
        communityCity: "", // 小区所属城市
        communityCoordinates: "", // 小区所属详细地址--
        communityDistrict: "", // 小区所属区域
        communityId: "", // 小区编号
        communityLatitude: "", // 小区纬度
        communityLongitude: "", // 小区经度
        communityName: "", // 小区名称
        communityProvince: "", // 小区所属省份/直辖市
      },
      address:[],
      citys:citys,
      dialogFormVisible: false,
      addOrUpdateFlag:1,
      total:1,
      date:'',
      aa:'',
      title:'新增小区',
      communityData:[],
      // 查看关联门店
      communityId:1010450,
      dialogTableVisible:false,
      shopDataList:[],
      shopTotal:1,
      shopData:{
        pageNum: 1,
        pageSize: 5,
        shopName:'',
        communityId: 1010450
      },
      //添加关联门店
      dialogStoreVisible:false,
      storeDataList:[],
      storeTotal:1,
      storeData:{
        pageNum: 1,
        pageSize: 5,
        shopName:'',
        communityId: ''
      },
      storeArray:[],//选择添加关联门店集合
    }
  },
  methods:{

    cancleAdd(){  //取消添加
      this.dialogStoreVisible=false;
      this.dialogTableVisible=true;
    },
    //保存关联门店
    addStore(){
      let shopIds=[];
      for(let it of this.storeArray){
        shopIds.push(it.shopId)
        // console.log(it.shopId)
      }
      console.log(shopIds)
      this.$http.post('associatedStores/addAssociatedStores',{
        panghuCommunityId: this.communityId,
        fendeShopCommunityList: shopIds
      })
          .then(res=>{
            if(res.data.status==200){
              this.$message.success('操作成功！')
              this.dialogStoreVisible=false
              this.getCommunityData()
            }else {
              this.$message.error('操作失败！')
            }

          })
    },
    //当选择框被点击时触发的事件
    handleSelectionChange(val){
      // console.log(val)
      this.storeArray=val;
    },
    handleSizeChange2(val) {
      // console.log(`每页 ${val} 条`);
      this.storeData.pageSize =val;
      this.storeData.pageNum=1;
      this.toAddStore();
    },
    handleCurrentChange2(val) {
      // console.log(`当前页: ${val}`);
      this.storeData.pageNum = val;
      // 当每页页数改变时重新查询
      this.toAddStore();
    },
    //添加关联门店
    toAddStore(){
      this.storeDataList.communityId=this.communityId;
      this.$http.get('associatedStores/findShopListByAdd',{
        params:this.storeData
      })
          .then(res=>{
            this.storeDataList=res.data.data.list;
            this.storeTotal=res.data.data.total;
            this.dialogStoreVisible=true;
            this.dialogTableVisible=false;
          })
    },
    handleSizeChange1(val) {
      // console.log(`每页 ${val} 条`);
      this.shopData.pageSize =val;
      this.getStoreData(this.communityId);
    },
    handleCurrentChange1(val) {
      // console.log(`当前页: ${val}`);
      this.shopData.pageNum = val;
      // 当每页页数改变时重新查询
      this.getStoreData(this.communityId);
    },
    //查看关联门店
    getStoreData(id){
      // console.log(id)
      this.communityId=id;
      this.shopData.communityId=id
      this.$http.get('associatedStores/associatedStoresList',{
        params:this.shopData
      })
          .then(res=>{
            this.shopDataList=res.data.data.list;
            this.shopTotal=res.data.data.total;
            this.dialogTableVisible=true;
          })
    },
    //删除表格数据
    deleteData(bb){
      // this.community.communityId=bb;
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post('community/communityRemove', {communityId:bb
        }).then((resp) => {
          if (resp.data.status == 200) {
            // this.$message.success(resp.data.message);
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getCommunityData()
          } else {
            this.$message.error("删除失败");
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //修改表格数据
    updateData(row){
      this.title='修改小区信息';
      this.community.addOrUpdateFlag=2;
      this.dialogFormVisible=true;
      this.community=row;
      this.aa='community/communityUpdate';
      this.address=[this.community.communityProvince,this.community.communityCity,this.community.communityDistrict];
    },
    //取消按钮事件
    cancle(){
      this.dialogFormVisible = false;
      this.address = [];
      this.communityData = {
        addOrUpdateFlag: 1,
        communityAddress: "",
        communityAreaCode: "",
        communityCity: "",
        communityCoordinates: "",
        communityDistrict: "",
        communityId: "",
        communityLatitude: "",
        communityLongitude: "",
        communityName: "",
        communityProvince: "",
      }
    },
    //确定按钮事件
    addSubmit(){
      this.$http.post('community/communityUpdate',this.community)
          .then(res=>{
            console.log(res.data)
            if(res.data.status==200){
              this.$message.success('操作成功！')
              this.dialogFormVisible = false;
              //community对象初始化
              this.getCommunityData()
              this.cancle()
            }else {
              this.$message.error('操作失败！')
            }
          })

      //详细地址赋值
      this.community.communityCoordinates=this.community.communityProvince+this.community.communityCity+this.community.communityDistrict+this.community.communityAddress
      //获取经纬度
      this.$http.get('https://restapi.amap.com/v3/geocode/geo', {
        params: {
          key: '457886b5972a97e93fb9cdccebfd450f',
          address: this.communityData.communityProvince +this.communityData.communityCity + this.communityData.communityDistrict + this.communityData.communityAddress
        }
      }).then((resp) => {
        let location = resp.data.geocodes[0].location
        //console.log(location)
        this.communityData.communityLatitude = location.split(',')[0]
        this.communityData.communityLongitude = location.split(',')[1]
      })

    },
    //添加小区
    addCommunity(){
      this.dialogFormVisible = true;
      this.title='新增小区';
      this.community.addOrUpdateFlag=1;
      this.aa='community/communityUpdate'
    },
    // 选择地区省份
    selectAddress(){
      //地址赋值
      this.community.communityProvince=this.address[0];
      this.community.communityCity=this.address[1];
      this.community.communityDistrict=this.address[2];
      // console.log(this.address)
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.communityLine.pageSize =val;
      this.getCommunityData();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.communityLine.pageNum = val;
      // 当每页页数改变时重新查询
      this.getCommunityData();
    },
    getCommunityData(){    /*查询所有小区信息  接口*/
      // console.log(this.date)
      this.$http.get('community/communityList',   /*get请求接口*/
          {
            params:this.communityLine
          }
      )
          .then(res=>{          /*回调函数*/
            if(status=200){
              this.communityData = res.data.data.list
              this.total=res.data.data.total
              // console.log(res.data.data.list)
            }else {
              this.$message.error('数据异常！')
            }
          })
          .catch(err=>{      /*异常*/
            this.$message.error('服务器接口异常！')
          })
    },
  },


  /* 钩子函数 页面加载后直接执行的代码块*/
  mounted() {
    this.getCommunityData()
  },
  watch:{
    date(){  //监听的数据的名称要一致
      if (this.date){
        this.communityLine.startTime=this.date[0];
        this.communityLine.endTime=this.date[1];
      }else {
        this.$message.error('日期异常！')
      }
    },

  }
}
</script>

<template>

  <div class="container">
    <!--  面包屑  表头-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<!--      <el-breadcrumb-item><a href="/">页面管理</a></el-breadcrumb-item>-->
      <el-breadcrumb-item>小区管理</el-breadcrumb-item>
    </el-breadcrumb>
      <!-- 搜索框模糊搜索 -->
      <el-row>
<!--    inline行列样式，行列平铺    -->
        <el-form :inline="true" :model="communityLine" class="demo-form-inline" style="margin-top: 15px">
          <el-form-item label="小区名称：">
            <el-input v-model="communityLine.communityName" clearable @clear="getCommunityData" placeholder="请输入小区名称"></el-input>
          </el-form-item>
          <el-form-item label="创建时间：">
            <el-date-picker
                v-model="date"
                end-placeholder="结束日期"
                range-separator="至"
                start-placeholder="开始日期"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" plain @click="getCommunityData">查 询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    <!--新增小区-->
    <el-row>
      <el-button type="warning"  plain @click="addCommunity">新增小区</el-button>
    </el-row>
<!--  表格  -->
    <el-table border :data="communityData" style="width: 100%; margin-top: 10px; margin-bottom: 10px" >
      <el-table-column label="ID" prop="communityId" align="center"></el-table-column>
      <el-table-column label="名称" prop="communityName" align="center"></el-table-column>
      <el-table-column label="位置" prop="communityCoordinates" width="180px" align="center"></el-table-column>
      <el-table-column label="用户数量" prop="communityUserCount" align="center"></el-table-column>
      <el-table-column label="关联门店" prop="communityShopCount" align="center"></el-table-column>
      <el-table-column label="创建时间" prop="createTime" width="180px" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-link type="warning" :underline="false" @click="getStoreData(scope.row.communityId)">查看关联门店</el-link>&nbsp;
          <el-link type="warning" :underline="false" @click="updateData(scope.row)">修改</el-link>&nbsp;
          <el-link type="warning" :underline="false" @click="deleteData(scope.row.communityId)">删除</el-link>
<!--          {{scope.row}}-->
        </template>
      </el-table-column>
    </el-table>
<!--  跳转页面 分页 -->
    <el-row>
      <!--  current-page 要访问的页码
            page-sizes 可选择的条数
            page-size 每页的条数
            total  总条数
            @size-change  每页展示的条数发生改变时触发的函数
            @current-change  选择页码时触发的函数
         -->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="communityLine.pageNum"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="communityLine.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-row>
<!--  弹出框  -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="community">
        <el-form-item label="小区名称" label-width="100px">
          <el-input v-model="community.communityName" autocomplete="off" placeholder="请输入小区名称"></el-input>
        </el-form-item>
        <el-form-item label="具体地址" label-width="100px">
          <el-cascader
              v-model="address"
              :options="citys"
              @change="selectAddress" placeholder="请选择省市县"></el-cascader>
        </el-form-item>
        <el-form-item label="" label-width="100px">
          <el-input v-model="community.communityAddress" autocomplete="off" placeholder="请输入小区详细地址"></el-input>
        </el-form-item>
        <span>{{communityData.communityLatitude}}</span>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancle">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </div>
    </el-dialog>
<!--    查看关联门店-->
    <el-dialog title="查看关联门店" :visible.sync="dialogTableVisible">
      <el-row>
        <el-form :inline="true" :model="shopData" class="demo-form-inline" style="margin-top: 15px">
          <el-form-item label="门店名称：">
            <el-input v-model="shopData.shopName" clearable @clear="getStoreData(communityId)" placeholder="请输入小区名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" plain @click="getStoreData(communityId)">查 询</el-button>
            <el-button type="warning" plain @click="toAddStore">添加关联门店</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table border :data="shopDataList">
        <el-table-column prop="index" label="序号"></el-table-column>
        <el-table-column prop="shopId" label="ID"></el-table-column>
        <el-table-column prop="shopName" label="名称"></el-table-column>
        <el-table-column prop="shopAddress" label="地址"></el-table-column>
        <el-table-column prop="shopOrderCount" label="订单数量"></el-table-column>
        <el-table-column prop="" label="操作">
          <el-button type="warning" plain>删除</el-button>
        </el-table-column>
      </el-table>
      <el-row>
        <el-pagination
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            :current-page="shopData.pageNum"
            :page-sizes="[5, 10]"
            :page-size="shopData.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="shopTotal">
        </el-pagination>
      </el-row>
    </el-dialog>
<!--    添加关联门店 弹出框-->
    <el-dialog title="添加关联门店" :visible.sync="dialogStoreVisible">
      <el-row>
        <el-form :inline="true" :model="storeData" class="demo-form-inline" style="margin-top: 15px">
          <el-form-item label="门店名称：">
            <el-input v-model="storeData.shopName" clearable @clear="toAddStore()" placeholder="请输入小区名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" plain @click="toAddStore()">查 询</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table border :data="storeDataList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="shopName" label="名称"></el-table-column>
        <el-table-column prop="shopId" label="ID"></el-table-column>
        <el-table-column prop="shopAddress" label="地址"></el-table-column>
        <el-table-column prop="shopOrderCount" label="订单数量"></el-table-column>
<!--        <el-table-column prop="" label="操作">-->
<!--          <el-button type="warning" plain>删除</el-button>-->
<!--        </el-table-column>-->
      </el-table>
      <el-row>
        <el-pagination
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
            :current-page="storeData.pageNum"
            :page-sizes="[5, 10,20,30]"
            :page-size="storeData.pageSize"
            layout="total, sizes, prev, pager, next"
            :total="storeTotal">
        </el-pagination>
        <div style="margin-top: 20px; margin-left: 300px">
          <el-button type="warning" plain size="mini" @click="cancleAdd">取消</el-button>
          <el-button type="warning" plain @click="addStore" size="mini">保存</el-button>
        </div>
      </el-row>
    </el-dialog>
  </div>

</template>

<style scoped>
.el-table .el-table-column{
  text-align: center;
}
</style>